<template>
  <scroll-view :scroll-y="true" class="h-11/12 m-auto w-11/12">
    <uni-forms :modelValue="formData">
      <!-- 温度计编号 -->
      <uni-card title="温度计编号" extra="必填*">
        <uni-forms-item>
          <uni-easyinput v-model="formData.temperatureId" />
        </uni-forms-item>
      </uni-card>
      <!-- 温度计使用区域 -->
      <uni-card title="温度计使用区域" extra="必填*">
        <uni-forms-item>
          <uni-easyinput v-model="formData.temperatureLocation" />
        </uni-forms-item>
      </uni-card>
      <!-- 在冰水中的实际测量温度℃/参考温度℃/参考温度与实际温度差℃（实际 - 参考） -->
      <uni-card title="在冰水中的温度" extra="必填*">
        <uni-forms-item>
          在冰水中的实际测量温度℃/参考温度℃/参考温度与实际温度差℃（实际 - 参考）
          <uni-easyinput
            type="textarea"
            v-model="formData.iceWaterTemperature"
          />
        </uni-forms-item>
      </uni-card>
      <!-- 在沸水中的实际测量温度℃/参考温度℃/参考温度与实际温度差℃（实际 - 参考） -->
      <uni-card title="在沸水中的温度" extra="必填*">
        <uni-forms-item>
          在沸水中的实际测量温度℃/参考温度℃/参考温度与实际温度差℃（实际 - 参考）
          <uni-easyinput
            type="textarea"
            v-model="formData.hotWaterTemperature"
          />
        </uni-forms-item>
      </uni-card>
      <!-- 填报人姓名 -->
      <uni-card title="填报人姓名" extra="必填*">
        <uni-forms-item>
          <uni-easyinput v-model="formData.name" />
        </uni-forms-item>
      </uni-card>
    </uni-forms>
    <ConfigComponent
      @clearFormData="clearFormData"
      @updateFormData="updateFormData"
      :formData="formData"
      name="wenDuJiJiaoZhun"
    />
  </scroll-view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import ConfigComponent from '@/components/ConfigComponent/ConfigComponent.vue';

// 表格提交信息
const formData = ref({
  temperatureId: '', //温度计编号
  temperatureLocation: '', //温度计使用区域
  iceWaterTemperature: '', // 在冰水中的温度
  hotWaterTemperature: '', // 在沸水中的温度
  name: '', //填报人姓名
});

// 清空表单数据
const clearFormData = () => {
  formData.value = {
    temperatureId: '', //温度计编号
    temperatureLocation: '', //温度计使用区域
    iceWaterTemperature: '', // 在冰水中的温度
    hotWaterTemperature: '', // 在沸水中的温度
    name: '', //填报人姓名
  };
};
// 更新表单数据
const updateFormData = (data: any) => {
  formData.value = data;
};
</script>

<style lang="scss" scoped>
::v-deep.uni-card {
  .uni-card__header {
    .uni-card__header-extra {
      .uni-card__header-extra-text {
        color: #ff0000;
      }
    }
  }
}
</style>
